<template>
    <div class="totals" @click="turn(info)">
        <div class="detail">
            <div class="left">
                <div class="title">{{info}}</div>
                <div class="time">
                    <span>{{time}}</span>
                </div>
            </div>
            <div v-if="bus" class="right" :class="{add:bus!=4&&bus!=6}">{{bus!=4&&bus!=6?'+':'-'}}{{amount}}</div>
            <div v-else class="right" :class="{add:amount>0}">{{amount>0?'+':''}}{{amount}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name : "index",
        props:{
            info:String,
            time:String,
            amount:Number,
            type:String,
            bus:Number
        },
        methods:{

            turn(info){
                if(this.type!='earn'){
                    return
                }
                this.$router.push({
                    path:`/earn/detail?info=${info}&amount=${this.amount}&bus=${this.bus}`
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .totals
        background-color #fff
        width 100%
        height 76px
    .detail
        background-color #fff
        height 75px
        margin-left 19px
        padding-right 20px
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #eee
        .left
            .title
                font-size 16px
                line-height 25px
                color #333
                width 255px
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .time
                margin-top 15px
                font-size 12px
                color #666
                span
                    margin-right 5px
        .right
            font-size 16px
            color #333
            font-family DIN
            font-weight bold
        .add
            color #00D6C0

</style>
